<script setup lang="ts" name="Playground">
import { h, render } from 'vue'

// const flag = ref(false)
// 想要控制某个结构的显示隐藏
// 1. h函数:
// 如果这个结构比较复杂, 用h函数创建极其麻烦;
// 如果结构简单, h函数非常灵活!!!
// 2. template提前写结构:
// 如果说结构简单, 很麻烦(先写好结构, 提供数据, 控制数据)
// 如果结构复杂, template提前写结构就比较友好
const show = () => {
  // 动态的创建一个结构(h) 插入box(render)
  // flag.value = true
  // h函数 是一个动态创建虚拟节点的函数
  // <h1 >我是一个大标题!!</h1>
  // h(创建的元素名, 属性, 子节点)
  // class属性 => className
  const span1 = h('span', {}, '我是span1')
  const span2 = h('span', {}, '我是span2')

  const vNode = h(
    'h1',
    {
      id: 'ddd',
      title: '哈哈哈',
      className: 'xxx',
    },
    [span1, span2]
  )
  // console.log(vNode)
  // render 是一个将虚拟节点渲染到指定挂载点的函数
  // render(虚拟dom, 挂载点)
  render(vNode, document.querySelector('.box')!)
}
</script>

<template>
  <!-- 专门用于测试不稳定的代码 -->
  <div>演练场</div>
  <button @click="show">显示</button>
  <div class="box">
    <!-- 需求: 点击按钮时 往box盒子中插入一个h1 -->
    <!-- <h1 v-if="flag">我是一个大标题!!</h1>  -->
  </div>

  <!-- <div class="box">
    <p class="desc">哈哈哈</p>
    <span>我是嘻嘻嘻</span>
    <ul>
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
    </ul>
  </div> -->
</template>

<style scoped></style>
